<template>
  <button v-once @click.once="msg='world'+Math.random()">{{ msg }}</button>
  <button @click.stop="msg='world'+Math.random()">{{ msg }}</button>
  <div class="parent" @keydown.alt="par" @click.right.alt="par">
    <!-- 点击son组件，不执行父组件冒泡的事件 -->
    <div class="son" @click.stop="son">

    </div>
  </div>
  <input type="text" autofocus @keydown.alt="par">
</template>
<script lang="ts" setup>
import {ref} from 'vue'

const msg = ref('hello')

function par() {
  console.log("parent()")
}

function son() {
  console.log("son()")
}
</script>

<style lang="scss" scoped>
.parent {
  width: 200px;
  height: 200px;
  background-color: #f00;
}

.son {
  width: 100px;
  height: 100px;
  background-color: #0f0;
}
</style>
